<template>
  <div class="unitFileDetail">
    <Button @click="$router.go(-1)" class="marRight">返回上一页</Button>
    <Tabs type="card" style="margin-top:15px;">
        <TabPane label="基本信息">
           <div class="baseTitle">设备基本信息</div>
           <Form :label-width="120">
             <Row :gutter="10" class="biaodan">
                 <Col span="6">
                    <FormItem label="电站：">{{detail.powerStation}}</FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="HD编号：">
                      {{detail.hdNumber}}
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="机组编号：">
                      {{detail.aircrewNumber}}
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="型号：">
                      {{detail.model}}
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="功率：">
                      {{detail.rateOfWork}}
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="投用日期：">
                      {{detail.inServiceDate}}
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="柴油机型号：">
                      {{detail.dieselModel}}
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="柴油机序列号：">
                      {{detail.dieselSeq}}
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="柴油机出厂日期：">
                      {{detail.dieselLeaveFactoryDate}}
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="柴油机生产厂家：">
                      {{detail.dieselManufacturer}}
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="发电机型号：">
                      {{detail.dynamoModel}}
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="发电机序列号：">
                      {{detail.dynamoSeq}}
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="发电机出厂日期：">
                      {{detail.dynamoLeaveFactoryDate}}
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="发电机生产厂家：">
                      {{detail.dynamoManufacturer}}
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="管理人员：">
                      {{detail.manager}}
                    </FormItem>
                  </Col>
             </Row>
           </Form>
           <div class="baseTitle">设备技术参数</div>
           <Form :label-width="120">
             <Row :gutter="10" class="biaodan">
                 <Col span="6">
                    <FormItem label="汽缸数量：">
                      {{detail.cylinderStatorNumber}}
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="缸径/行程：">
                     {{detail.cylinderBore}}
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="汽缸工作容积：">
                      {{detail.cylinderWorkingVolume}}
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="压缩比：">
                      {{detail.compressionRatio}}
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="额定功率：">
                      {{detail.ratedPower}}
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="备用功率：">
                      {{detail.standbyPower}}
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="有效功率：">
                      {{detail.effectivityPower}}
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="有效转矩：">
                      {{detail.effectiveTorque}}
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="额定转速：">
                      {{detail.ratedSpeed}}
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="燃油消耗：">
                      {{detail.fuelConsumption}}
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="机油消耗：">
                     {{detail.oilConsumption}}
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="防护等级：">
                      {{detail.levelOfProtection}}
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="绝缘等级：">
                      {{detail.insulationGrade}}
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="机组重量：">
                      {{detail.netWeight}}
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="机组外形尺寸：">
                      {{detail.dimensionWeight}}
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="启动方式：">
                      {{detail.startingMode}}
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="冷却方式：">
                      {{detail.coolingMode}}
                    </FormItem>
                  </Col>
             </Row>
           </Form>
        </TabPane>
        <TabPane label="机组文件" >
            <!-- <div style="margin-bottom:10px;">
                <Button type="primary">导出Excel</Button>
            </div> -->
            <Table  border :columns="columns" :data="tableData"></Table>
            <!-- <Page :total="total" show-elevator :page-size='pageSize' @on-change='pageChange'  style="margin:20px auto;text-align:center"/> -->
        </TabPane>

    </Tabs>

  </div>
</template>

<script>

import {
  findById,
  jzfile
} from '@/api/unitFile'

export default {
  data () {
    return {
      id: undefined,
      name: '',
      aircrewNumber: undefined,
      detail: {},
      // total: 0,
      // pageNo: 1,
      // pageSize: 10,
      columns: [
        {
          type: 'index',
          width: 60,
          title: '序号',
          align: 'center'
        },
        {
          title: '标题',
          key: 'title'
        },
        {
          title: '简介',
          key: 'content'
        },
        {
          title: '文件分类',
          key: 'type'
        },
        {
          title: '上传人',
          key: 'uploadUserName'
        },
        {
          title: '上传日期',
          key: 'uploadDate'
        },
        {
          title: '文件链接',
          key: 'fileUrl',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      window.open(params.row.fileUrl)
                    }
                  }
                },
                params.row.fileUrl
              )
            ])
          }
        },
        // {
        //   title: '操作',
        //   key: 'action',
        //   width: 100,
        //   align: 'center',
        //   render: (h, params) => {
        //     return h('div', [
        //       h(
        //         'Button',
        //         {
        //           props: {
        //             type: 'primary',
        //             size: 'small'
        //           },
        //           on: {
        //             click: () => {
        //               console.log(params)
        //             }
        //           }
        //         },
        //         '查看'
        //       )
        //     ])
        //   }
        // }
      ],
      tableData: []
    }
  },
  methods: {
    // pageChange (e) {
    //   this.searchItem.pageNo = e
    //   console.log(this.searchItem.pageNo, '页码')
    //   this.search()
    // },
    findById () {
      let params = { id: this.id }
      findById(params).then(res => {
        console.log('res>' + JSON.stringify(res))
        if (res.code == 0) {
          this.detail = res.data
        }
      })
    },
    getTable () {
        jzfile({aircrewNumber: this.aircrewNumber}).then(res => {
          if (res.code == 0) {
            this.tableData = res.data
          }
        })
    }
  },
  mounted () {},
  created () {
    this.id = this.$route.query.id
    this.aircrewNumber = this.$route.query.code
    console.log('this.id>' + this.id)
    this.findById();
    this.getTable()
  }
}
</script>

<style lang="less">
.unitFileDetail {
  background: #fff;
  height: 100%;
  padding: 15px;
  font-size: 14px;
  .baseTitle {
    font-weight: bold;
    font-size:16px;
    margin-bottom:10px;
  }
  .ivu-form-item {
    margin-bottom:10px;
  }
  .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{
        border-radius: 0;
        background: #fff;
        margin-right:10px;
    }
  .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active{
        border-top: 2px solid #3399ff;
    }
   .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active:before{
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        background: #3399ff;
        position: absolute;
        top: 0;
        left: 0;
    }
   .biaodan {
     .ivu-form-item-label {
       background:#f5f5f5!important;
     }
     .ivu-form-item-content {
       text-indent: 15px!important;
     }
     .ivu-form-item{
       border:1px solid #eaeaea;
     }
   }
}
</style>
